<template>
    <div class="home-container">
        <el-row :gutter="20" class="equal-width-row">
            <el-col v-for="(stat, index) in stats" :key="index" class="equal-text">
                <el-card>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <div class="stat-title">{{ stat.title }}</div>
                            <div class="stat-value">{{ stat.value }}</div>
                        </div>

                        <el-icon v-if="stat.icon" :class="stat.iconClass">
                            <component :is="stat.icon" />
                        </el-icon>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="equal-width-row">
            <el-col :span="12">
                <el-card class="common-functions-card" hoverable>
                    <h3 class="title">常用功能</h3>
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <div class="function-grid">
                                <el-card class="function-item" shadow="hover" @click="handleClick('create-inbound')">
                                    <el-icon class="icon blue">
                                        <Download />
                                    </el-icon>
                                    <div class="function-text">新建入库单</div>
                                </el-card>
                                <el-card class="function-item" shadow="hover" @click="handleClick('create-outbound')">
                                    <el-icon class="icon green">
                                        <Upload />
                                    </el-icon>
                                    <div class="function-text">新建出库单</div>
                                </el-card>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="function-grid">
                                <el-card class="function-item" shadow="hover" @click="handleClick('create-property')">
                                    <el-icon class="icon purple">
                                        <Document />
                                    </el-icon>
                                    <div class="function-text">新建物权单</div>
                                </el-card>
                                <el-card class="function-item" shadow="hover" @click="handleClick('receivable-query')">
                                    <el-icon class="icon orange">
                                        <Search />
                                    </el-icon>
                                    <div class="function-text">应收查询</div>
                                </el-card>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :span="12">
                <el-row :gutter="20" style="margin-bottom: 20px;">
                    <el-col :span="12">
                        <el-card hoverable>
                            <h3 class="title">入库作业</h3>
                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <el-card class="sub-module-item" shadow="hover" @click="handleModuleClick('物权管理')">
                                        <div class="module-text">物权管理</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="sub-module-item" shadow="hover" @click="handleModuleClick('入库管理')">
                                        <div class="module-text">入库管理</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="sub-module-item" shadow="hover" @click="handleModuleClick('移库管理')">
                                        <div class="module-text">移库管理</div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card hoverable>
                            <h3 class="title">出库作业</h3>
                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <el-card class="sub-module-item" shadow="hover" @click="handleModuleClick('作业管理')">
                                        <div class="module-text">作业管理</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="sub-module-item" shadow="hover" @click="handleModuleClick('出库管理')">
                                        <div class="module-text">出库管理</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="sub-module-item" shadow="hover" @click="handleModuleClick('配送管理')">
                                        <div class="module-text">配送管理</div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card hoverable>
                            <h3 class="title">基础设施</h3>
                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <el-card class="sub-module-item" shadow="hover" @click="handleModuleClick('商品管理')">
                                        <div class="module-text">商品管理</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="sub-module-item" shadow="hover" @click="handleModuleClick('客户管理')">
                                        <div class="module-text">客户管理</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="sub-module-item" shadow="hover" @click="handleModuleClick('仓库管理')">
                                        <div class="module-text">仓库管理</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="sub-module-item" shadow="hover" @click="handleModuleClick('协议价格')">
                                        <div class="module-text">协议价格</div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card hoverable>
                            <h3 class="title">仓库管理</h3>
                            <el-row :gutter="10">
                                <el-col :span="12">
                                    <el-card class="sub-module-item" shadow="hover" @click="handleModuleClick('仓库管理')">
                                        <div class="module-text">仓库管理</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="sub-module-item" shadow="hover" @click="handleModuleClick('库存管理')">
                                        <div class="module-text">库存管理</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="sub-module-item" shadow="hover" @click="handleModuleClick('库存冻结')">
                                        <div class="module-text">库存冻结</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="sub-module-item" shadow="hover" @click="handleModuleClick('移库管理')">
                                        <div class="module-text">移库管理</div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="equal-width-row">
            <el-col :span="18">
                <el-card name="weekBusinessData" style=" margin-bottom: 20px;" hoverable>
                    <weekBusinessData />
                </el-card>
                <el-card name="weekReceivablesStatistics" hoverable>
                    <weekReceivablesStatistics />
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="summary-card" hoverable>
                    <div name="dayIncome" class="summary-content">
                        <dayIncome />
                    </div>
                    <div name="dayPaid" class="summary-content">
                        <dayPaid />
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
    import {
        ref
    } from 'vue'
    import {
        Download,
        Upload,
        Document,
        Search,
        Checked,
        Timer,
        Money,
        Collection,
        CreditCard
    } from '@element-plus/icons-vue'
    import dayIncome from '../ECharsts/dayIncome.vue'
    import dayPaid from '../ECharsts/dayPaid.vue'
    import weekBusinessData from '../ECharsts/weekBusinessData.vue'
    import weekReceivablesStatistics from '../ECharsts/weekReceivablesStatistics.vue'

    const stats = ref([{
            title: '待复核入库单',
            value: '156',
            icon: Checked,
            iconClass: 'blue-icon'
        },
        {
            title: '待复核出库单',
            value: '13',
            icon: Timer,
            iconClass: 'orange-icon'
        },
        {
            title: '待办出库任务',
            value: '56',
            icon: Collection,
            iconClass: 'green-icon'
        },
        {
            title: '待收费金额',
            value: '¥8642',
            icon: Money,
            iconClass: 'purple-icon'
        },
        {
            title: '待核销金额',
            value: '¥356',
            icon: CreditCard,
            iconClass: 'red-icon'
        }
    ])

    const handleClick = (action) => {
        console.log('点击功能:', action)
    }

    const handleModuleClick = (moduleName) => {
        console.log('点击模块:', moduleName)
    }
</script>

<style scoped>
    .home-container {
        padding: 10px;
    }

    .equal-width-row {
        display: flex;
        margin: 10px;
    }

    .equal-text {
        flex: 1;
    }

    .stat-card {
        align-items: center;
        justify-content: space-between;
        display: flex;
    }

    .stat-title {
        font-size: 14px;
        color: #909399;
        margin-bottom: 5px;
    }

    .stat-value {
        font-size: 22px;
        font-weight: bold;
        color: #303133;
    }

    .stat-card .el-icon {
        font-size: 40px;
        opacity: 0.2;
    }

    .common-functions-card {
        height: 100%;
        margin-bottom: 20px;
    }

    .common-functions-card .title {
        font-size: 16px;
        color: #303133;
        margin-bottom: 15px;
        font-weight: normal;
    }

    .function-grid {
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        gap: 10px;
        height: 100%;
    }

    .function-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        height: 120px;
        transition: all 0.3s;
    }

    .function-item:hover {
        transform: translateY(-3px);
    }

    .icon {
        font-size: 30px;
        margin-bottom: 10px;
        padding: 15px;
        border-radius: 50%;
    }

    .icon.blue {
        color: #409EFF;
        background-color: rgba(64, 158, 255, 0.1);
    }

    .icon.green {
        color: #67C23A;
        background-color: rgba(103, 194, 58, 0.1);
    }

    .icon.purple {
        color: #8E44AD;
        background-color: rgba(142, 68, 173, 0.1);
    }

    .icon.orange {
        color: #E6A23C;
        background-color: rgba(230, 162, 60, 0.1);
    }

    .function-text {
        font-size: 14px;
        color: #606266;
    }

    .title {
        font-size: 16px;
        color: #303133;
        margin-bottom: 15px;
        font-weight: normal;
    }

    .sub-module-item {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        height: 60px;
        margin: 5px 0;
        border-radius: 6px;
        border: 1px solid #ebeef5;
        transition: all 0.3s;
        background-color: white;
        padding: 2px;
        text-align: center;
    }

    .sub-module-item:hover {
        background-color: #f5f7fa;
        border-color: #dcdfe6;
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .module-text {
        font-size: 13px;
        color: #606266;
    }

    .chart-title {
        font-size: 16px;
        color: #303133;
        font-weight: normal;
        margin-bottom: 15px;
    }

    .summary-card {
        height: 100%;
    }

    .summary-content {
        margin-bottom: 20px;
    }

    .summary-content:last-child {
        margin-bottom: 0;
    }
</style>